<template>
  <Row>
    <Col :span="12">
      <Card>
        <div slot="title">个人资料</div>
        <div slot="extra">
        <a href="#" title="编辑资料" @click.prevent="openEditInfo">
            <Icon size="18" type="ios-create-outline"></Icon>
        </a>
        <a href="#" title="更换头像" @click.prevent="openChangeAvatar">
            <Icon size="18" type="md-person"></Icon>
        </a>
        </div>
        <div class="ivu-table ivu-table-default ivu-table-stripe">
          <table style="width: 100%">
            <tr>
              <th style="text-indent: 10px;width: 100px;">姓名</th>
              <td>{{userInfo.realName}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">邮箱</th>
              <td>{{userInfo.email}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">手机</th>
              <td>{{userInfo.mobilePhone}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">电话</th>
              <td>{{userInfo.telephone}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">公司</th>
              <td>{{userInfo.companyName}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">部门</th>
              <td>{{userInfo.departmentName}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">备注</th>
              <td>{{userInfo.remark}}</td>
            </tr>
          </table>
        </div>
      </Card>
    </Col>
    <Col :span="12">
      <Card>
        <div slot="title">登录信息</div>
        <a href="#" slot="extra" @click.prevent="openChangePassword">
            <Icon size="18" type="md-female"></Icon>
            更换密码
        </a>
        <div class="ivu-table ivu-table-default ivu-table-stripe">
          <table style="width: 100%">
            <tr>
              <th style="text-indent: 10px;width: 100px;">用户</th>
              <td>{{userInfo.userName}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">手机</th>
              <td>{{userInfo.mobilePhone}}</td>
            </tr>
            <tr>
              <th style="text-indent: 10px;width: 100px;">用户角色</th>
              <td>{{userInfo.userRole}}</td>
            </tr>
          </table>
        </div>
      </Card>
    </Col>
  </Row>
</template>
<script>
import MLDChangePassword from './change-password'
import MLDChangeAvatar from './change-avatar'
import MLDChangeInfo from './change-info'
import { getInfo } from '@/api/ums/ums.personal.service.js'
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  mounted () {
    this.handleRefresh(this)
  },
  methods: {
    handleRefresh (vm) {
      getInfo().then(res => {
        this.userInfo = res.data
      })
    },
    openChangePassword () {
      this.$msgBox.showDialog({
        title: '修改密码',
        content: MLDChangePassword,
        parent: this
      })
    },
    openEditInfo () {
      this.$msgBox.showDialog({
        title: '编辑个人信息',
        content: MLDChangeInfo,
        parent: this
      })
    },
    openChangeAvatar () {
      this.$msgBox.showDialog({
        title: '上传头像',
        content: MLDChangeAvatar,
        parent: this
      })
    }
  }
}
</script>
